
// 和 async 细节 一样 当 then 或者 async 函数 返回一个Promise的还会 会额产生2个 微任务。




Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4); // 看源码 这里因为还返回了 一个Promise  会多套一层then a  其实 还会再套一层then 会多套2层then
// 这里执行完后 会 将Promise.resolve(4); 后面.then (resolve,reject) 传入 then 返回的Promise的resolve函数
  })
  .then(res => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
    // 执行完后会 立刻 resolve 改变then 返回的 Promise的状态  让下一个then 的回调 加入微队列
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  });
// 最终结果👉: 0 1 2 3 4 5

// 🔑 核心原因
// 当 then 回调返回一个 Promise 时，会额外产生 2 个微任务！
// 这是 Promise/A+ 规范和 ECMAScript 规范的要求：返回的 Promise 需要被"展开"（unwrap），这个展开过程会产生额外的微任务。

  // ！！！！ 改变 了 promsie状态 就会触发 stateChange 就会触发 将 回调加入微队列
  // 注意.then 方法执行  如果promise状态没有改变 则将回调函数加入数组，如果状态改变了则将回调加入数组 并且立刻遍历数组 将对应的回调加入微队列、
// 微队列的变化‘
1.
[
{
  console.log(0);
  return Promise.resolve(4); //  这里执行完后将 3。 加入微队列
},
]

2.

[
  // 这里是因为 Promise.resolve() 是同步代码  然后.then 立刻执行 所以将  console.log(1); 加入微队列
{
  console.log(1);
},
]

3.
执行 微队列的第一个任务 ，将Promise.resolve(4) 源码里面 多套的一层then 的回调加入微队列
[

  {
    console.log(1);
  },
  {
    resolve(4)
    Promise.resolve(4);.then (resolve,reject) ,这个微队列任务 就是 resolve函数
  },
]

4。 执行   console.log(1); 将   console.log(2); 插入微队列

[
  {
    Promise.resolve(4);.then (resolve,reject) ,这个微队列任务 就是 resolve函数
  },
  {
    console.log(2);
  }
]

5. 执行    Promise.resolve(4);.then (resolve,reject) ,这个微队列任务 就是 执行 resolve函数 执行完后改变了promise状态  将   第二个他then 的resolve函数; 插入微队列
[
  {
    console.log(2);
  },
{
  resolve函数
}
]

6. 执行    console.log(2);将  console.log(3); 插入微队列

[
{
  resolve函数
}，
{
  console.log(3);
}
]

7. 执行    resolve函数 将  console.log(res 4); 插入微队列

[
  {
    console.log(3);
  },
  {
    console.log(res 4);
  },
  ]

  7. 执行    console.log(3); 将  console.log(5); 插入微队列

  [
    {
      console.log(res 4);
    },
    {
      console.log(5);
    }
    ]
8. 执行    console.log(4);
9. 执行    console.log(5);




// 理解来看就是 这样

Promise.resolve()
  .then(() => {
    console.log(0);
return 4
  })
  .then((res) => {
    return res
  })
  .then((res) => {
    return res
  })
  .then(res => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  });
